import React from 'react';
import 'rc-tabs/assets/index.css';
import { isEqual, isEmpty } from 'lodash';
import './Tabstyle_32.css';


export class Tabstyle_32 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            tabid: props.datas.currentTab,
            rcMenuLoaded : false,
        }
        this.handleTabData = this.handleTabData.bind(this);
    }



    handleTabData(tabid){
        const { datas={} } = this.props;
        const { handleTabData={} } = datas;
        handleTabData(tabid);
        this.setState({
            tabid: tabid
        });
    }

    componentWillReceiveProps(nextProps){
        const { tabid } = this.state;
        if(!isEqual(tabid, nextProps.datas.currentTab)){
            this.setState({
                tabid: nextProps.datas.currentTab
            })
        }
    }

    componentWillMount(){
        loadjs.isDefined("rc-menu") ? loadjs.ready('rc-menu',()=>{
            this.setState({rcMenuLoaded:true})
        }) : loadjs(['/cloudstore/resource/pc/rc-menu/rc-menu.js','/cloudstore/resource/pc/rc-menu/rc-menu.css'],'rc-menu',()=>{
            this.setState({rcMenuLoaded:true})
        })
    }
    componentDidUpdate() {    
        $(".style_32_Tab .rc-menu-overflowed-submenu").hover(function(){
            setTimeout(function(){ 
                $('.depstyle_32').parents('.rc-menu-submenu-popup').css({zIndex:'99999'})
             }, 300);
        });
        
    }


    render(){
        const { datas={}, fontStyle, ebaseid = '' } = this.props;
        const { tabid } = this.state;
        const { currentTab, tabids = [], titles = [],methodvalue,tabwidth,counts, config={}, isShowSettingShowType='0',tabstyle, tabvalue} = datas;
        const { item={} } = config;
        const { header={} } = item;
        const {rcMenuLoaded} = this.state
        if(!rcMenuLoaded){return null;}
        if(isEmpty(datas)) return <div/>;
        let style = {paddingLeft: '6px', paddingRight: '6px',display:'inline-block',height:'44px'};
        let style1 = {width: tabwidth-45 + 'px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', display: 'inline-block',paddingLeft:'3px',height:'42px'};
        let titleStyle = {width: '100%'};
        let tHtml_new = (
            <div className="commonTab style_32_Tab" id='style_32_Tab'>
                <div
                    className="tabcontainer tab2"
                    style={titleStyle}
                >
                        <window.rcMenu.Menu ecId={`${this && this.props && this.props.ecId || ''}_rcMenu.Menu@ymqap2`}
                            mode = "horizontal"
                            overflowedIndicator= {React.createElement("div", {
                                width:"16px",
                                height:"16px",
                                className:"img"

                            })}
                            
                        >
                    {
                        titles.map((title, i)=> {
                            if ((ebaseid == '8') && counts && counts[i] !== -1 && counts[i] !== '' && counts[i] !== null) {
                                if(counts[i] > 99){
                                    title +='(99+)';
                                }else {
                                    title +=' (' + counts[i] + ')';
                                }
                            }else if (ebaseid == 'blogStatus' &&
                                counts && '0'!== counts[i]) {
                                title += ' (' + counts[i] + ')';

                            }else if(ebaseid == '7_DY'&& counts && '0'!== counts[i]){
                                title += ' (' + counts[i].noReadNum + ')';
                            }else if(isShowSettingShowType == '1' && ebaseid == '7'&& counts && counts[i] && counts[i].noReadNum){
                                title += ' (' + counts[i].noReadNum + ')';
                            }else if(ebaseid == '7'&& counts && counts[i] && counts[i].isHaveNoRead && counts[i].isHaveNoRead == '1'){
                                title =  title;
                            }
                            const className = tabids[i] == tabid ? `tab2selected depstyle_32 tab2selected_${titles.length == i+1 && titles.length !=1? 'last' : i} wea-f${fontStyle.tab1fontsize || 1}` : `tab2unselected depstyle_32 tab2unselected_${titles.length == i+1 && titles.length !=1 ? 'last' : i} wea-f${fontStyle.tab2fontsize || 1}`;
                            const pointClassName = ebaseid == '7'&& counts && counts[i] && counts[i].isHaveNoRead && counts[i].isHaveNoRead == '1' ? 'portal-new-unreadpoint' : '';
                            let tabTextStyle=pointClassName==''?{display:'inline-block',width:'100%',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginLeft:'0px'}:{display:'inline-block',width:'calc(100% - 10px)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginLeft:'0px'}
                            methodvalue == '2' ?tabTextStyle={display:'inline-block',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginLeft:'0px'}:'';
                            return  <window.rcMenu.Menu.MenuItem ecId={`${this && this.props && this.props.ecId || ''}_rcMenu.Menu.MenuItem@9xr6z8@${tabids[i]}`}
                        title={title}
                        className={className}
                        onClick={() => this.handleTabData(tabids[i])}
                    >
                        <div className='tab32_name' style={methodvalue == '2' ? style:style1}>
                            <div style={tabTextStyle}>{title}</div>
                           <div className={pointClassName} style={{position:'relative',top:'-15px'}}></div>
                        </div>
                            </window.rcMenu.Menu.MenuItem>
                        })
                    }
                    </window.rcMenu.Menu>
            </div>
            </div>
        )
        return tHtml_new;
    }
}

export default Tabstyle_32;